<template>
  <ul class="bottom">
    <!-- 停电 -->
    <li v-for="(item, index) in powerCut" :key="index">
      <div :class="item.isTrue == true ? 'powerCuts' : 'powerCut'">
        <Arrow :title="item.title" class="arrow" />
        <div class="bottoms">
          <div
            class="div1"
            v-for="(item1, index1) in item.chlidren"
            :key="index1"
          >
            <div>
            
              <span class="p1">
                <span v-if="item.title == '作业风险'" class="span2">III级</span>
                <span class="span1">{{ item1.lefts }}</span></span
              >

              <span class="p2">{{ item1.rights }}</span>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import Arrow from "../arrows";
export default {
  name: "PowerCut",
  components: { Arrow },
  props: ["powerCut"],
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  li {
    .powerCut {
      background: url("../../assets/image/hellowword/BackgroundThree.png");
      width: 468px;
      height: 277px;
      background-size: 100%;
    }
    .powerCut,
    .powerCuts {
      // border: 1px dashed #ccc;
      .arrow {
        padding-top: 20px;
        padding-bottom: 16px;
      }

      .bottoms {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 16px;
        .div1 {
          width: 436px;
          height: 65px;
          // background-image: linear-gradient(
          //   90deg,
          //   #002668 0%,
          //   #003781 56.83%,
          //   rgba(0, 38, 104, 0) 100%
          // );
          background: url("../../assets/image/hellowword/rectangle.png")
            no-repeat;
          background-size: 100%;
          // border-image-source: linear-gradient(90deg,rgba(1, 139, 249, 0) 0%,#018bf9 29.91%,rgba(1, 139, 249, 0) 100%);
          // border-image-slice: 1;

          // border: 1px dashed #ccc;

          margin-bottom: 15px;

          div {
           
            margin: 7px 10px 8px 10px;
            width: 420px;
            height: 50px;

            .p1 {
              .span1 {
                text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.42);
                font-family: Microsoft YaHei;
                font-weight: 700;
                color: #95e0ff;
                font-size: 18px;
                line-height: 25px;
              }
              .span2 {
                width: 50px;
                height: 22px;
                background-color: #db4b33;
                color: white;
                display: inline-block;
                text-align: center;
                margin-left: 5px;
              }
            }
            .p2 {
              color: white;
              font-size: 18px;
            }
          }
        }
      }
    }
    .powerCuts {
      background: url("../../assets/image/hellowword/BackgroundNight.png") no-repeat;
      width: 468px;
      height: 308px;
      background-size: 100%;
      // border: 1px dashed #ccc;
    
    }
  }
}
</style>
